<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>产品分类</title>
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<script src="js/jquery.min.js" ></script>
<script src="js/common.js" ></script>
<style type="text/css">
body{ max-width:100%; } 
.mui-bar-nav~.mui-content{padding-top:50px; overflow:hidden;}
.mui-row.mui-fullscreen>[class*="mui-col-"] {height: 100%;}
.mui-segmented-control .mui-control-item {line-height: 50px;width: 100%;}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {background-color: #fff;}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{ color:#505050;border-bottom: 1px solid #ffffff;  background-color:transparent;}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{ color:#dd2727;}
[v-cloak] {display: none;}
</style>
</head>

<body>
<div id="indexVm" v-cloak>
		<header class="header mui-bar mui-bar-nav">
			<a class="ind-search" href="searchPage.html"><span>搜索想要的宝贝</span></a>
			<div class="notice-box"><a href="message.html">
				<span class="notice-icon"><img src="images/notice-icon.png"><em>{{messagenum}}</em></span>
				<span>消息</span></a>
			</div>
		</header>
  <!--my-head-end-->
		<footer class="footer ind-footer mui-bar-tab" id="footer">
			<ul class="display-box-middle">
				<li>
					<a href="index.html">
						<span class="footer-icon footer-index"></span><span>首页</span>
					</a>
				</li>
				<li>
					<a class="on" href="prodCat.html">
						<span class="footer-icon footer-classification"></span><span>分类</span>
					</a>
				</li>
				<li>
					<a href="shoppingcart.html">
						<span class="footer-icon footer-cart"></span><span>购物车</span>
					</a>
				</li>
				<li>
					<a href="userCenter.html">
						<span class="footer-icon footer-my"></span><span>个人中心</span>
					</a>
				</li>
			</ul>
		</footer>
  <!--footer-end-->

  <!--分类开始--> 
      <div class="mui-content mui-row mui-fullscreen">
          <div class="mui-col-xs-3 myscroll">
              <ul  id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                <li v-for="(wsProdCategory,index) in wsProdCategoryRootFilter(wsProdCategoryList)" class="left-tit">
                	<a v-bind:href="'#item'+index" class="mui-control-item">{{wsProdCategory.name}}</a>
                </li>
              </ul>
          </div>
          <div id="segmentedControlContents" class="mui-col-xs-9 myscroll" style="border-left: 1px solid #c8c7cc;">
              <div v-for="(wsProdCategory,index) in wsProdCategoryRootFilter(wsProdCategoryList)" v-bind:id="'item'+index" class="mui-control-content" v-bind:class="index === 0?'mui-active':'' ">
                <!--一组分类-->
                <div class="classification-group">
                  <div class="classification-tit">{{wsProdCategory.name}}</div>
                  <div class="classification-item">
                    <ul class="clearfix">
                      <li v-for="prodCat in wsProdCategoryChildFilter(wsProdCategoryList,wsProdCategory.id)">
                      <a v-bind:href="'productList.html?prodCategoryId='+prodCat.id">
                        <div class="classification-img"><img v-bind:src="prodCat.imageUrl"></div>
                        <div class="classification-txt">{{prodCat.name}}</div>
                      </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <!--一组分类-->
              </div>
          </div>
      </div>
  <!--分类结束--> 
</div>
<!--container-end-->
<script src="js/mui.min.js"></script>
<script src="js/wxshop.js"></script>
<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el: '#indexVm',
		data: {
			messagenum: "0",
			wsProdCategoryList: []
		},
		created: function () {
			mui.ajax(wxshop.serverUrl+"/prodCat", {
				type: "post",
				data:{
					code:wxshop.getUrlParam("code")
				},
				dataType: "json",
				success: function(data) {
					if(data.ret==0){
						mui.alert(data.msg);
					}
					if(data.ret==2){
						wxshop.getOpenId(data.appid);
					}			
					vm.messagenum=data.messagenum;
					vm.wsProdCategoryList=data.wsProdCategoryList;
					vm.$nextTick(function () {
					  	  mui.init({
						    swipeBack: true, //启用右滑关闭功能
					  	  });
						  var controls = document.getElementById("segmentedControls");
						  var contents = document.getElementById("segmentedControlContents");
						  controls.querySelector('.mui-control-item').classList.add('mui-active');
						  contents.querySelector('.mui-control-content').classList.add('mui-active');
						  mui('.myscroll').scroll({
										scrollY: true, //是否竖向滚动
										scrollX: false, //是否横向滚动
										startX: 0, //初始化时滚动至x
										startY: 0, //初始化时滚动至y
										bounce: true, //是否启用回弹
										bounceTime: 500, //回弹动画时间
										scrollTime: 500,
										directionLockThreshold: 5,
										indicators:false,
							});
					})
				},
				error: function(xhr,type,errorThrown) {
					mui.alert("后台接口请求失败，请联系管理员！错误"+errorThrown);
				}
			});
		},
		methods: {
		  	wsProdCategoryRootFilter: function (wsProdCategoryList) {
		      return wsProdCategoryList.filter(function (wsProdCategory) {
		        return wsProdCategory.parentId=='0';
		      })
		  	},
		    wsProdCategoryChildFilter: function (wsProdCategoryList,parentId) {
		      return wsProdCategoryList.filter(function (wsProdCategory) {
		        return wsProdCategory.parentId==parentId;
		      })
		    }
		}
	});
			
</script>
</body>
</html>
